<template>
    <div class="survey container-content">
        <el-row>
            <el-col :span="24">
                <h3 class="panel-title">仓库列表</h3>
            </el-col>
        </el-row>
        <el-divider class="divider"></el-divider>
        <el-row class="export-container">
            <el-button type="primary" @click="addNewData">新增</el-button>
            <el-button type="primary" @click="exporting">导出</el-button>
        </el-row>
        <el-row class="filter-container">
            <el-col :span="24">
                <el-input
                    placeholder="查询..."
                    v-model="searchValue"
                    class="input-with-select"
                    @change="searchData"
                >
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        type="primary"
                        @click="searchData"
                    ></el-button>
                </el-input>
            </el-col>
        </el-row>
        <el-table
            ref="customerTable"
            :data="tableData"
            stripe
            style="width: 100%"
        >
            <!-- @selection-change="handleSelectionChange" -->
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <!-- <el-table-column prop="id" label="id"> </el-table-column> -->
            <el-table-column prop="wareName" label="仓库名称"></el-table-column>
            <el-table-column prop="wareCode" label="仓库编码"></el-table-column>
            <el-table-column prop="telPhone" label="联系电话">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <el-table-column
                prop="changeTime"
                label="更新时间"
            ></el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间"
            ></el-table-column>

            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-tooltip
                        class="item"
                        effect="dark"
                        content="详情"
                        placement="bottom"
                    >
                        <el-button
                            plain
                            icon="el-icon-more"
                            size="small"
                            @click="handleDetail(scope.$index, scope.row)"
                        ></el-button>
                    </el-tooltip>
                    <el-tooltip
                        class="item"
                        effect="dark"
                        content="编辑"
                        placement="bottom"
                    >
                        <el-button
                            type="primary"
                            plain
                            size="small"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        ></el-button>
                    </el-tooltip>
                    <el-tooltip
                        class="item"
                        effect="dark"
                        content="删除"
                        placement="bottom"
                    >
                        <el-button
                            type="danger"
                            plain
                            size="small"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.$index, scope.row)"
                        ></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="table-pagination"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
        <!-- 弹出框 -->
        <el-drawer
            :title="rowId ? '编辑仓库' : '新增仓库'"
            :visible.sync="drawer"
            direction="rtl"
            :before-close="handleClose"
            size="100%"
            destroy-on-close
        >
            <div class="drawer-content">
                <FormCom ref="formRef" :id="rowId" />
            </div>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="submit">保存</el-button>
            </div>
        </el-drawer>
        <el-drawer
            title="仓库详情"
            :visible.sync="showDetail"
            direction="ttb"
            :before-close="handleClose"
            size="100%"
            show-close
            destroy-on-close
        >
            <DetailFormCom :id="detailId" />
        </el-drawer>
    </div>
</template>
<script>
import { getList, deleteList } from "@/api/system/warehouse";
import FormCom from "./add/index";
import DetailFormCom from "./detail/index";
export default {
    components: {
        FormCom,
        DetailFormCom,
    },
    data() {
        return {
            searchValue: "",
            total: 0,
            tableData: [],
            drawer: false, //弹窗显示
            rowId: "",
            showDetail: false,
            detailId: "",
        };
    },
    methods: {
        addNewData() {},
        exporting() {},
        // 获取列表请求
        getData() {
            getList().then((res) => {
                if (res.code === 200) {
                    this.tableData = res.rows;
                    this.total = res.total;
                }
            });
        },
        // 删除事件
        handleDelete(index, row) {
            this.$confirm("请确定要删除所选的记录吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteList(row.id).then((res) => {
                        if (res.code === 200) {
                            this.tableData.splice(index, 1);
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getData();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 搜索事件
        searchData() {
            // let searchValue = this.searchValue;
            // searchSurvey({ searchValue }).then((res) => {
            //   this.tableData = res.rows;
            //   console.log("请求成功", res);
            // });
        },
        //新增按钮
        addNewData() {
            this.drawer = true;
            this.rowId = "";
        },
        //编辑按钮
        handleEdit(index, row) {
            this.rowId = row.id;
            this.drawer = true;
        },
        // 详情按钮
        handleDetail(index, row) {
            this.detailId = row.id;
            this.showDetail = true;
        },
        // 保存
        submit() {
            this.$refs.formRef.onSubmit();
            this.drawer = false;
            this.getData();
        },
        // 取消
        cancelForm() {
            this.drawer = false;
            this.rowId = "";
            this.getData();
        },
        // 关闭 drawer
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                    this.rowId = "";
                    this.getData();
                })
                .catch((_) => {});
        },
    },
    created() {
        this.getData();
    },
};
</script>
<style lang="scss" scoped>
.divider {
    margin: 0;
}

.export-container {
    margin: 15px 0;
}

.pagination {
    margin-top: 10px;
}
</style>
